<template>
  <div class="content-box">
      <e-heading>渠道列表</e-heading>
      <el-row class="item channel-title">
          <el-col :span="4">
            <label>渠道名称</label>
          </el-col>
          <el-col :span="20">
            渠道报名链接
          </el-col>
      </el-row>
      <el-row class="item" v-for="item in linkList" :key="item.lotteryChannels">
          <el-col :span="4" class="name">
            <label class="hidden">{{item.lotteryChannels}}</label>
          </el-col>
          <el-col :span="15">
            <el-input v-model="item.h5Url"></el-input>
          </el-col>
          <el-col :span="4" class="btn">
            <el-button type="primary" class="c-btn" @success="handleSuccess" v-clipboard="item.h5Url">复制链接</el-button>
          </el-col>
      </el-row>
  </div>
</template>

<script>
import api from 'api/race'
export default {
  created () {
    this.getChannels()
  },
  data () {
    return {
      linkList: []
    }
  },
  methods: {
    getChannels () {
      api.getChannels({matchId: this.$route.query.id}, this).then((res) => {
        this.linkList = res.data
      })
    },
    handleSuccess () {
      this.$message('拷贝成功！')
    }
  }
}
</script>

<style lang="scss" scoped>
  .channel-title{
    color:#666;
    text-align: center;
  }
  .name{
    line-height: 36px;
    text-align: right;
    padding-right: 28px;
    label{
      width:120px;
      display: inline-block
    }
  }
  .item{
    margin-bottom: 20px;
  }
  .btn{
    text-align: right;
  }
</style>
